<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			
			<ul>
				<li v-for="color in colors">{{color}}</li>
			</ul>
			
			<table border="1">
				<tr><td>学号</td><td>姓名</td><td>年龄</td></tr>
				<tr v-for="stu in stus">
					<td>{{stu.id}}</td>
					<td>{{stu.name}}</td>
					<td>{{stu.age}}</td>
				</tr>
			</table>			
		</div>
		<script>
			var app = Vue.createApp({
				data() {
					return {
						"message": "Hello Vue!",
						colors : ["红","黄","蓝","绿"],
						stus:[
							{
								id:101,
								name:"张三",
								age:18
							},
							{
								id:102,
								name:"李四",
								age:18
							},
							{
								id:103,
								name:"王五",
								age:18
							}
							
						]
					}
				}
			});
			var vm = app.mount("#app")
		</script>



	</body>
</html>